<template>
  <div class="app_main">
    <div class="header">原合同信息</div>
    <el-card shadow="always" class="source_contract" style="margin: 0 30px;padding: 20px">
      <div class="table_body source_contract" style="position: relative">
        <el-form ref="cuForm" class="cuForm" v-loading="formLoading" :rules="cuRules" :model="cuForm"
                 label-width="100px" center size="mini"
                 :disabled="true"
        >
          <div class="contract_title">合同编号：
            <span :class="cuForm.contract_num?'text-red':''">
            {{ cuForm.contract_num ? cuForm.contract_num : '提交后自动生成编号' }}
          </span>
          </div>
          <div class="contract_content">
            <p>项目名称：
              <el-form-item prop="customer_id">
                <el-select clearable filterable v-model="cuForm.customer_id" style="width: 400px" placeholder="请选择客户">
                  <el-option v-for="customer in customer_arr" :label="customer.name" :key="customer.id"
                             :value="customer.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </p>
            <p>客户合同名称（甲）：
              <el-form-item prop="part_a">
                {{ cuForm.part_a }}
              </el-form-item>
            </p>
            <p>乙方（发布方）：
              <el-form-item prop="part_b_name">
                <el-select clearable v-model="selectDept" value-key="id" placeholder="请选择乙方名称"
                           style="width: 400px" @change="selectDeptChange"
                >
                  <el-option v-for="(item,index) in dept_list" :key="index" :value="item"
                             :label="item.head"
                  ></el-option>
                </el-select>
              </el-form-item>
            </p>
            <p>合同时间：
              <el-form-item prop="contract_begin_date">
                <el-date-picker v-model="cuForm.contract_begin_date" type="date" placeholder="开始时间"
                                value-format="yyyy-MM-dd" format="yyyy年MM月dd日" style="width: 200px"
                >
                </el-date-picker>
              </el-form-item>
              至
              <el-form-item prop="contract_end_date">
                <el-date-picker v-model="cuForm.contract_end_date" type="date" placeholder="结束时间"
                                value-format="yyyy-MM-dd" format="yyyy年MM月dd日" style="width: 200px"
                >
                </el-date-picker>
              </el-form-item>
              止。
            </p>
            <p>广告发布概况：</p>
            <div>
              <el-table class="fill_table" :header-row-style="{'line-height':'38px'}" :data="cuForm.mediaDetailList"
                        stripe border
                        style="width: 80%;margin: 10px auto"
              >
                <el-table-column label="媒体类型" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0" :prop="'mediaDetailList.'+scope.$index+'.media_type_id'"
                                  :rules="{required: true, message: '媒体类型不能为空', trigger: 'change'}"
                    >
                      <el-select v-model="scope.row.media_type_id" size="mini" placeholder="请选择媒体类型" @change="(val)=>{
                      mediaTypeChange(scope.$index,val)
                    }"
                      >
                        <el-option v-for="item in point_type_arr" :key="item.id" :value="item.id" :label="item.name"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="规格" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0" :prop="'mediaDetailList.'+scope.$index+'.media_type_spec_id'"
                                  :rules="{required: true, message: '规格不能为空', trigger: 'change'}"
                    >
                      <el-select v-model="scope.row.media_type_spec_id" size="mini" placeholder="请选择规格">
                        <el-option v-for="(item,index) in scope.row.media_type_spec_arr" :key="index" :value="item"
                                   :label="item"
                        />
                      </el-select>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="数量" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0" :prop="'mediaDetailList.'+scope.$index+'.quantity'"
                                  :rules="{required: true, message: '数量不能为空', trigger: 'blur'}"
                    >
                      <el-input v-model="scope.row.quantity" size="mini" placeholder="请输入数量"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="单价" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0" :prop="'mediaDetailList.'+scope.$index+'.price'"
                                  :rules="{required: true, message: '单价不能为空', trigger: 'blur'}"
                    >
                      <el-input v-model="scope.row.price" size="mini" placeholder="请输入单价"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="时长/周期" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0" :prop="'mediaDetailList.'+scope.$index+'.duration'"
                                  :rules="{required: true, message: '时长不能为空', trigger: 'blur'}"
                    >
                      <el-input v-model="scope.row.duration" size="mini" placeholder="请输入时长"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="金额" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0" :prop="'mediaDetailList.'+scope.$index+'.amount'"
                                  :rules="{required: true, message: '金额不能为空', trigger: 'blur'}"
                    >
                      <el-input v-model="scope.row.amount" size="mini" placeholder="请输入金额" type="number" step="0.01">
                        <template slot="append">元</template>
                      </el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
              </el-table>
              <el-table class="fill_table" :header-row-style="{'line-height':'38px'}"
                        :data="cuForm.proxyMediaDetailList" stripe border
                        style="width: 80%;margin: 10px auto"
              >
                <el-table-column label="代理媒体" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0"
                                  :prop="'proxyMediaDetailList.'+scope.$index+'.proxy_media_type'"
                                  :rules="{required: true, message: '代理媒体不能为空', trigger: 'blur'}"
                    >
                      <el-input v-model="scope.row.proxy_media_type" placeholder="请输入代理媒体"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="规格" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0" :prop="'proxyMediaDetailList.'+scope.$index+'.media_type_spec'"
                                  :rules="{required: true, message: '规格不能为空', trigger: 'blur'}"
                    >
                      <el-input v-model="scope.row.media_type_spec" placeholder="请输入规格"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="数量" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0" :prop="'proxyMediaDetailList.'+scope.$index+'.quantity'"
                                  :rules="{required: true, message: '数量不能为空', trigger: 'blur'}"
                    >
                      <el-input v-model="scope.row.quantity" size="mini" placeholder="请输入数量"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="时长/周期" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0" :prop="'proxyMediaDetailList.'+scope.$index+'.duration'"
                                  :rules="{required: true, message: '时长不能为空', trigger: 'blur'}"
                    >
                      <el-input v-model="scope.row.duration" size="mini" placeholder="请输入时长"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="金额" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0" :prop="'proxyMediaDetailList.'+scope.$index+'.amount'"
                                  :rules="{required: true, message: '金额不能为空', trigger: 'blur'}"
                    >
                      <el-input v-model="scope.row.amount" size="mini" placeholder="请输入金额" type="number" step="0.01">
                        <template slot="append">元</template>
                      </el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <!--                <el-table-column v-if="!formDisabled" width="50" align="center">-->
                <!--                  <template slot="header">-->
                <!--                    <i style="color: #00c300;font-size: 20px;line-height: 38px" class="el-icon-circle-plus-outline"-->
                <!--                       @click="add"-->
                <!--                    ></i>-->
                <!--                  </template>-->
                <!--                  <template slot-scope="scope">-->
                <!--                    <i style="color: #da0000;font-size: 20px;line-height: 38px" class="el-icon-remove-outline"-->
                <!--                       @click="deleteByIndex(scope.$index)"-->
                <!--                    ></i>-->
                <!--                  </template>-->
                <!--                </el-table-column>-->
              </el-table>
            </div>
            <p>1、优惠价格：人民币
              <el-form-item prop="discounted_price">
                {{ cuForm.discounted_price }}
                <!--              <el-input style="width: 200px" v-model="cuForm.discounted_price" type="number" step="0.01"-->
                <!--                        placeholder="请输入优惠价格"-->
                <!--              >-->
                <!--              </el-input>-->
              </el-form-item>
              元
              (大写 {{ cuForm.discounted_price_big }})（
              <el-form-item>
                <el-checkbox v-model="cuForm.contain_tax"></el-checkbox>
              </el-form-item>
              此价格为不含税价格
              <span v-show="cuForm.contain_tax">
              ，如若开票，另收
              <el-input v-model="cuForm.tax_percent" size="mini" style="width: 50px" type="number" step="0.01"/>
              %的税费）
            </span>
              <span v-show="!cuForm.contain_tax">
              ）
            </span>
              <br/>
              <span style="padding-left: 30px"></span>其中，自有资源
              <el-form-item>
                {{ cuForm.self_price }}
                <!--              <el-input v-model="cuForm.self_price" style="width: 200px" placeholder="请输入自有资源价格"-->
                <!--                        type="number" step="0.01"-->
                <!--              >-->
                <!--              </el-input>-->
              </el-form-item>
              元
              (大写 {{ self_price_big }})；
              代理资源
              <el-form-item>
                {{ cuForm.proxy_price }}
                <!--              <el-input v-model="cuForm.proxy_price" style="width: 200px" placeholder="请输入代理资源价格"-->
                <!--                        type="number" step="0.01"-->
                <!--              >-->
                <!--              </el-input>-->
              </el-form-item>
              元
              (大写 {{ proxy_price_big }}),
            </p>
            <div>
              <p v-if="cuForm.old_data">2、画面更换费用
                <span :class="cuForm.replace_price?'':'text-red'">
                {{ cuForm.replace_price ? cuForm.replace_price : '未填写' }}
              </span>
                元/幅/次
              </p>
              <p v-if="!cuForm.old_data">
                2、画面更换费用另计：
              </p>
              <p v-if="!cuForm.old_data">自有资源：</p>
              <el-table v-if="!cuForm.old_data" style="width: 80%;margin: 0 auto" class="fill_table"
                        :data="cuForm.contractMediaReplacePriceList" stripe border
                        :header-row-style="{'line-height':'38px'}"
              >
                <el-table-column label="媒体类型" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0"
                                  :prop="'contractMediaReplacePriceList.'+scope.$index+'.media_type_id'"
                                  :rules="{required: true, message: '媒体类型不能为空', trigger: 'change'}"
                    >
                      <el-select v-model="scope.row.media_type_id" size="mini" placeholder="请选择媒体类型">
                        <el-option v-for="item in point_type_arr" :key="item.id" :value="item.id" :label="item.name"/>
                      </el-select>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="价格" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0"
                                  :prop="'contractMediaReplacePriceList.'+scope.$index+'.replace_price'"
                                  :rules="{required: true, message: '价格不能为空', trigger: 'blur'}"
                    >
                      <el-input v-model="scope.row.replace_price" type="number" step="0.01" size="mini"
                                placeholder="请输入价格"
                      >
                        <template slot="append">元/幅/次</template>
                      </el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column v-if="!formDisabled" width="50" align="center">
                  <template slot="header">
                    <i style="color: #00c300;font-size: 20px;line-height: 38px" class="el-icon-circle-plus-outline"
                       @click="priceAdd(1)"
                    />
                  </template>
                  <template slot-scope="scope">
                    <i style="color: #da0000;font-size: 20px;line-height: 38px" class="el-icon-remove-outline"
                       @click="priceRemove(1,scope.$index)"
                    />
                  </template>
                </el-table-column>
              </el-table>
              <p v-if="!cuForm.old_data">代理资源：</p>
              <el-table v-if="!cuForm.old_data" style="width: 80%;margin: 0 auto" class="fill_table"
                        :data="cuForm.contractProxyMediaReplacePriceList" stripe border
                        :header-row-style="{'line-height':'38px'}"
              >
                <el-table-column label="媒体类型" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0"
                                  :prop="'contractProxyMediaReplacePriceList.'+scope.$index+'.media_type_name'"
                                  :rules="{required: true, message: '媒体类型不能为空', trigger: 'blur'}"
                    >
                      <el-input v-model="scope.row.media_type_name" size="mini" placeholder="请输入媒体类型" clearable>
                      </el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="价格" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0"
                                  :prop="'contractProxyMediaReplacePriceList.'+scope.$index+'.replace_price'"
                                  :rules="{required: true, message: '价格不能为空', trigger: 'blur'}"
                    >
                      <el-input v-model="scope.row.replace_price" type="number" step="0.01" size="mini"
                                placeholder="请输入价格"
                      >
                        <template slot="append">元/幅/次</template>
                      </el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column v-if="!formDisabled" width="50" align="center">
                  <template slot="header">
                    <i style="color: #00c300;font-size: 20px;line-height: 38px" class="el-icon-circle-plus-outline"
                       @click="priceAdd(2)"
                    />
                  </template>
                  <template slot-scope="scope">
                    <i style="color: #da0000;font-size: 20px;line-height: 38px" class="el-icon-remove-outline"
                       @click="priceRemove(2,scope.$index)"
                    />
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <p>现金人民币
              <span :class="cuForm.pay_cash_amount?'':'text-red'">
                {{ cuForm.pay_cash_amount ? cuForm.pay_cash_amount : '0' }}
            </span>
              <!--            {{ cuForm.pay_cash_amount }}-->
              <!--            <el-input v-model="cuForm.pay_cash_amount" size="mini" placeholder="请输入现金金额"-->
              <!--                      style="width: 200px" type="number" step="0.01"-->
              <!--            >-->
              <!--            </el-input>-->
              元，(大写 {{ cuForm.pay_cash_amount_big }} )；置换人民币
              <span>
                {{ cuForm.displace_amount ? cuForm.displace_amount : '0' }}
              </span>
              <!--            {{ cuForm.displace_amount }}-->
              <!--            <el-input v-model="cuForm.displace_amount" size="mini" placeholder="请输入现金金额"-->
              <!--                      style="width: 200px" type="number" step="0.01"-->
              <!--            >-->
              <!--            </el-input>-->
              元，(大写 {{ cuForm.displace_amount_big }} )<br>
              备注：
              <span :class="cuForm.memo?'':'text-red'">
              {{ cuForm.memo ? cuForm.memo : '未填写' }}
            </span>
              <!--            {{ cuForm.memo }}-->
              <!--            <el-input v-model="cuForm.memo" type="textarea" placeholder="请输入备注"></el-input>-->
              <el-table class="fill_table" :data="cuForm.payDetailList" style="margin-top: 10px" border>
                <el-table-column label="付款时间" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0" :prop="'payDetailList.'+scope.$index+'.pay_time'"
                                  :rules="{required: true, message: '付款时间不能为空', trigger: 'change'}"
                    >
                      <el-date-picker
                        v-model="scope.row.pay_time"
                        type="date"
                        placeholder="请选择付款时间"
                        value-format="yyyy-MM-dd"
                        format="yyyy年MM月dd日"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="付款金额" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0" :prop="'payDetailList.'+scope.$index+'.pay_amount'"
                                  :rules="{required: true, message: '付款时间不能为空', trigger: 'blur'}"
                    >
                      <el-input v-model="scope.row.pay_amount" placeholder="请输入付款金额" type="number" step="0.01">
                      </el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="付款方式" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0" :prop="'payDetailList.'+scope.$index+'.pay_type'"
                                  :rules="{required: true, message: '付款时间不能为空', trigger: 'change'}"
                    >
                      <el-select v-model="scope.row.pay_type" placeholder="请选择付款方式">
                        <el-option :value="1" label="现金"></el-option>
                        <el-option :value="2" label="置换"></el-option>
                      </el-select>
                    </el-form-item>
                  </template>
                </el-table-column>
              </el-table>
            </p>
            <p>4、甲方经办人联系方式：
              <el-form-item prop="part_a_contact">
              <span :class="cuForm.part_a_contact?'':'text-red'">
                {{ cuForm.part_a_contact ? cuForm.part_a_contact : '未填写' }}
              </span>
                <!--              <el-input v-model="cuForm.part_a_contact" placeholder="请输入甲方经办人联系方式"></el-input>-->
              </el-form-item>
              ，乙方经办人联系方式：
              <el-form-item prop="part_b_contact">
              <span :class="cuForm.part_b_contact?'':'text-red'">
                {{ cuForm.part_b_contact ? cuForm.part_b_contact : '未填写' }}
              </span>
                <!--              <el-input v-model="cuForm.part_b_contact" placeholder="请输入乙方经办人联系方式"></el-input>-->
              </el-form-item>
            </p>
            <p>开户名：
              <el-form-item prop="bank_account_name">
                <el-input v-model="cuForm.bank_account_name" placeholder="请输入开户名" style="width: 500px"></el-input>
              </el-form-item>
            </p>
            <p>开户行：
              <el-form-item prop="bank_name">
                <el-input v-model="cuForm.bank_name" placeholder="请输入开户行" style="width: 500px"></el-input>
              </el-form-item>
            </p>
            <p>帐号：
              <el-form-item prop="bank_num">
                <el-input v-model="cuForm.bank_num" placeholder="请输入账号" style="width: 500px"></el-input>
              </el-form-item>
            </p>
            <p>
              验收方式:
              <!--            {{ cuForm.acceptance_way }}-->
              <span :class="cuForm.acceptance_way?'':'text-red'">
                {{ cuForm.acceptance_way ? cuForm.acceptance_way : '未填写' }}
            </span>
              <!--            <el-select size="mini" clearable v-model="cuForm.acceptance_way" style="width: 60px">-->
              <!--              <el-option value="A"></el-option>-->
              <!--              <el-option value="B"></el-option>-->
              <!--            </el-select>-->
            </p>
            <p>
              A、现场验收&nbsp;&nbsp;&nbsp;&nbsp;B、画面情况报送验收
            </p>
            <p>
              更换视频画面价格:
              <span :class="cuForm.multi_replace_price?'':'text-red'">
                {{ cuForm.multi_replace_price ? cuForm.multi_replace_price : '未填写' }}
              </span>
              <!--            <el-input style="width: 150px" size="mini" v-model="cuForm.multi_replace_price" placeholder="请输入更换视频费用"-->
              <!--                      type="number" step="0.01"-->
              <!--            ></el-input>-->
              元/张
            </p>
            <p>
              其他约定：
              <!--            {{ cuForm.other_memo }}-->
              <span :class="cuForm.other_memo?'':'text-red'">
                {{ cuForm.other_memo ? cuForm.other_memo : '未填写' }}
            </span>
              <!--            <el-input type="textarea" v-model="cuForm.other_memo" size="mini" placeholder="请输入其他约定" :rows="4"-->
              <!--            ></el-input>-->
            </p>
            <p style="text-align: right">签订日期：
              <el-form-item prop="sign_date">
                <el-date-picker v-model="cuForm.sign_date" type="date" placeholder="签订时间"
                                value-format="yyyy-MM-dd" format="yyyy年MM月dd日" style="width: 180px"
                >
                </el-date-picker>
              </el-form-item>
            </p>
          </div>
          <div class="two_title">附件信息</div>
          <!--        <div style="width: 80%;margin: 10px auto">-->
          <!--          <el-button type="primary" size="mini" @click="showUpLoad">上传合同</el-button>-->
          <!--        </div>-->
          <el-table :data="cuForm.attachmentList" size="mini" border stripe style="width: 80%;margin: 0 auto">
            <el-table-column label="序号" width="50" align="center">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column label="合同名称" prop="name" min-width="300" align="center">
            </el-table-column>
            <el-table-column label="操作" width="250" align="center">
              <template slot-scope="scope">
                <el-button-group>
                  <el-button size="mini" type="success" @click="look(scope.row.url)" :disabled="false">预览
                  </el-button>
                  <el-button size="mini" type="primary" @click="download(scope.row.url)" :disabled="false">下载查看
                  </el-button>
                  <el-button size="mini" type="danger" @click="removeAttachment(scope.$index)">删除</el-button>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </div>
    </el-card>
    <div style="width: 80%;margin:0 auto;padding-top: 20px">
      <el-divider>以下为合同补充协议</el-divider>
    </div>
    <div class="header">合同补充协议</div>
    <el-card shadow="always" class="new_contract" style="margin: 0 30px 20px 30px;padding: 20px">
      <div class="table_body" style="position: relative">
        <el-form v-loading="formLoading" ref="cuForm2" class="cuForm" :rules="cuRules" :model="cuForm2"
                 label-width="100px" center size="mini"
                 :disabled="formDisabled"
        >
          <div class="contract_title">合同编号：
            <span :class="cuForm2.contract_num?'text-red':''">
              {{ cuForm2.contract_num ? cuForm2.contract_num : '提交后自动生成编号' }}
            </span>
          </div>
          <div class="contract_content">
            <p>项目名称：
              <el-form-item prop="customer_id">
                <el-select v-model="cuForm2.customer_id" clearable filterable style="width: 400px" placeholder="请选择客户"
                           @change="getHistoryUser" :disabled="true"
                >
                  <el-option v-for="customer in customer_arr" :label="customer.name" :key="customer.id"
                             :value="customer.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </p>
            <p>客户合同名称（甲）：
              <el-form-item prop="part_a">
                <el-select v-model="cuForm2.part_a" filterable allow-create style="width: 400px"
                           placeholder="请选择客户合同名称"
                >
                  <el-option v-for="(part_a,index) in part_a_history_list" :key="index" :label="part_a"
                             :value="part_a"
                  />
                </el-select>
              </el-form-item>
            </p>
            <p>乙方（发布方）：
              <el-form-item prop="part_b_name">
                <el-select v-model="selectDept2" clearable value-key="id" placeholder="请选择乙方名称"
                           style="width: 400px" @change="selectDeptChange"
                >
                  <el-option v-for="(item,index) in dept_list" :key="index" :value="item"
                             :label="item.head"
                  />
                </el-select>
              </el-form-item>
            </p>
            <p>合同时间：
              <el-form-item prop="contract_begin_date">
                <el-date-picker v-model="cuForm2.contract_begin_date" type="date" placeholder="开始时间"
                                value-format="yyyy-MM-dd" format="yyyy年MM月dd日" style="width: 200px"
                >
                </el-date-picker>
              </el-form-item>
              至
              <el-form-item prop="contract_end_date">
                <el-date-picker v-model="cuForm2.contract_end_date" type="date" placeholder="结束时间"
                                value-format="yyyy-MM-dd" format="yyyy年MM月dd日" style="width: 200px"
                >
                </el-date-picker>
              </el-form-item>
              止。
            </p>
            <p>广告发布概况：</p>
            <div>
              <el-table class="fill_table" :header-row-style="{'line-height':'38px'}" :data="cuForm2.mediaDetailList"
                        stripe border
                        style="width: 80%;margin: 10px auto"
              >
                <el-table-column label="媒体类型" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0" :prop="'mediaDetailList.'+scope.$index+'.media_type_id'"
                                  :rules="{required: true, message: '媒体类型不能为空', trigger: 'change'}"
                    >
                      <el-select v-model="scope.row.media_type_id" size="mini" placeholder="请选择媒体类型"
                                 @change="(val)=>{mediaTypeChange(scope.$index,val)}"
                      >
                        <el-option v-for="item in point_type_arr" :key="item.id" :value="item.id" :label="item.name"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="规格" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0" :prop="'mediaDetailList.'+scope.$index+'.media_type_spec_id'"
                                  :rules="{required: true, message: '规格不能为空', trigger: 'change'}"
                    >
                      <el-select v-model="scope.row.media_type_spec_id" size="mini" placeholder="请选择规格">
                        <el-option v-for="(item,index) in scope.row.media_type_spec_arr" :key="index" :value="item"
                                   :label="item"
                        />
                      </el-select>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="数量" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0" :prop="'mediaDetailList.'+scope.$index+'.quantity'"
                                  :rules="{required: true, message: '数量不能为空', trigger: 'blur'}"
                    >
                      <el-input v-model="scope.row.quantity" size="mini" placeholder="请输入数量"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="单价" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0" :prop="'mediaDetailList.'+scope.$index+'.price'"
                                  :rules="{required: true, message: '单价不能为空', trigger: 'blur'}"
                    >
                      <el-input v-model="scope.row.price" size="mini" placeholder="请输入单价"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="时长/周期" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0" :prop="'mediaDetailList.'+scope.$index+'.duration'"
                                  :rules="{required: true, message: '时长不能为空', trigger: 'blur'}"
                    >
                      <el-input v-model="scope.row.duration" size="mini" placeholder="请输入时长"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="金额" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0" :prop="'mediaDetailList.'+scope.$index+'.amount'"
                                  :rules="{required: true, message: '金额不能为空', trigger: 'blur'}"
                    >
                      <el-input v-model="scope.row.amount" size="mini" placeholder="请输入金额" type="number" step="0.01">
                        <template slot="append">元</template>
                      </el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column v-if="!formDisabled" width="50" align="center">
                  <template slot="header">
                    <i style="color: #00c300;font-size: 20px;line-height: 38px" class="el-icon-circle-plus-outline"
                       @click="myAdd"
                    ></i>
                  </template>
                  <template slot-scope="scope">
                    <i style="color: #da0000;font-size: 20px;line-height: 38px" class="el-icon-remove-outline"
                       @click="myDeleteByIndex(scope.$index)"
                    ></i>
                  </template>
                </el-table-column>
              </el-table>
              <el-table class="fill_table" :header-row-style="{'line-height':'38px'}"
                        :data="cuForm2.proxyMediaDetailList" stripe border
                        style="width: 80%;margin: 10px auto"
              >
                <el-table-column label="代理媒体" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0"
                                  :prop="'proxyMediaDetailList.'+scope.$index+'.proxy_media_type'"
                                  :rules="{required: true, message: '代理媒体不能为空', trigger: 'blur'}"
                    >
                      <el-input v-model="scope.row.proxy_media_type" placeholder="请输入代理媒体"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="规格" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0" :prop="'proxyMediaDetailList.'+scope.$index+'.media_type_spec'"
                                  :rules="{required: true, message: '规格不能为空', trigger: 'blur'}"
                    >
                      <el-input v-model="scope.row.media_type_spec" placeholder="请输入规格"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="数量" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0" :prop="'proxyMediaDetailList.'+scope.$index+'.quantity'"
                                  :rules="{required: true, message: '数量不能为空', trigger: 'blur'}"
                    >
                      <el-input v-model="scope.row.quantity" size="mini" placeholder="请输入数量"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="时长/周期" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0" :prop="'proxyMediaDetailList.'+scope.$index+'.duration'"
                                  :rules="{required: true, message: '时长不能为空', trigger: 'blur'}"
                    >
                      <el-input v-model="scope.row.duration" size="mini" placeholder="请输入时长"></el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="金额" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0" :prop="'proxyMediaDetailList.'+scope.$index+'.amount'"
                                  :rules="{required: true, message: '金额不能为空', trigger: 'blur'}"
                    >
                      <el-input v-model="scope.row.amount" type="number" step="0.01" size="mini" placeholder="请输入金额">
                        <template slot="append">元</template>
                      </el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column v-if="!formDisabled" width="50" align="center">
                  <template slot="header">
                    <i style="color: #00c300;font-size: 20px;line-height: 38px" class="el-icon-circle-plus-outline"
                       @click="add"
                    ></i>
                  </template>
                  <template slot-scope="scope">
                    <i style="color: #da0000;font-size: 20px;line-height: 38px" class="el-icon-remove-outline"
                       @click="deleteByIndex(scope.$index)"
                    ></i>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <p>1、优惠价格：人民币
              <el-form-item prop="discounted_price">
                <span style="font-size: 18px">{{ cuForm2.discounted_price ? cuForm2.discounted_price : '0' }}</span>
              </el-form-item>
              元
              (大写 {{ cuForm2.discounted_price_big }})（
              <el-form-item>
                <el-checkbox v-model="cuForm2.contain_tax"></el-checkbox>
              </el-form-item>
              此价格为不含税价格
              <span v-show="cuForm2.contain_tax">
              ，如若开票，另收
              <el-input v-model="cuForm2.tax_percent" size="mini" style="width: 50px" type="number" step="0.01"/>
              %的税费）
            </span>
              <span v-show="!cuForm2.contain_tax">
              ）
            </span>
              <br/>
              <span style="padding-left: 30px"></span>其中，自有资源
              <el-form-item>
                <span style="font-size: 18px">{{ cuForm2.self_price ? cuForm2.self_price : '0' }}</span>
              </el-form-item>
              元
              (大写 {{ self_price_big2 }})；
              代理资源
              <el-form-item>
                <span style="font-size: 18px">{{ cuForm2.proxy_price ? cuForm2.proxy_price : '0' }}</span>
                <!--                <el-input v-model="cuForm2.proxy_price" style="width: 200px" placeholder="请输入代理资源价格"-->
                <!--                          type="number" step="0.01"-->
                <!--                >-->
                <!--                </el-input>-->
              </el-form-item>
              元
              (大写 {{ proxy_price_big2 }}),
            </p>
            <div>
              <p v-if="cuForm2.old_data">
                2、画面更换费用另计：
                <el-input v-model="cuForm2.replace_price" style="width: 200px" size="mini"
                          oninput="value=value.replace(/[^\d.]/g,'')" placeholder="请输入画面更换费用"
                />
                元/幅/次
              </p>
              <p v-if="!cuForm2.old_data">
                2、画面更换费用另计：
              </p>
              <p v-if="!cuForm2.old_data">自有资源：</p>
              <el-table v-if="!cuForm2.old_data" style="width: 80%;margin: 0 auto" class="fill_table"
                        :data="cuForm2.contractMediaReplacePriceList" stripe border
                        :header-row-style="{'line-height':'38px'}"
              >
                <el-table-column label="媒体类型" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0"
                                  :prop="'contractMediaReplacePriceList.'+scope.$index+'.media_type_id'"
                                  :rules="{required: true, message: '媒体类型不能为空', trigger: 'change'}"
                    >
                      <el-select v-model="scope.row.media_type_id" size="mini" placeholder="请选择媒体类型">
                        <el-option v-for="item in point_type_arr" :key="item.id" :value="item.id" :label="item.name"/>
                      </el-select>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="价格" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0"
                                  :prop="'contractMediaReplacePriceList.'+scope.$index+'.replace_price'"
                                  :rules="{required: true, message: '价格不能为空', trigger: 'blur'}"
                    >
                      <el-input v-model="scope.row.replace_price" type="number" step="0.01" size="mini"
                                placeholder="请输入价格"
                      >
                        <template slot="append">元/幅/次</template>
                      </el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column v-if="!formDisabled" width="50" align="center">
                  <template slot="header">
                    <i style="color: #00c300;font-size: 20px;line-height: 38px" class="el-icon-circle-plus-outline"
                       @click="priceAdd(1)"
                    />
                  </template>
                  <template slot-scope="scope">
                    <i style="color: #da0000;font-size: 20px;line-height: 38px" class="el-icon-remove-outline"
                       @click="priceRemove(1,scope.$index)"
                    />
                  </template>
                </el-table-column>
              </el-table>
              <p v-if="!cuForm2.old_data">代理资源：</p>
              <el-table v-if="!cuForm2.old_data" style="width: 80%;margin: 0 auto" class="fill_table"
                        :data="cuForm2.contractProxyMediaReplacePriceList" stripe border
                        :header-row-style="{'line-height':'38px'}"
              >
                <el-table-column label="媒体类型" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0"
                                  :prop="'contractProxyMediaReplacePriceList.'+scope.$index+'.media_type_name'"
                                  :rules="{required: true, message: '媒体类型不能为空', trigger: 'blur'}"
                    >
                      <el-input v-model="scope.row.media_type_name" size="mini" placeholder="请输入媒体类型" clearable>
                      </el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="价格" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0"
                                  :prop="'contractProxyMediaReplacePriceList.'+scope.$index+'.replace_price'"
                                  :rules="{required: true, message: '价格不能为空', trigger: 'blur'}"
                    >
                      <el-input v-model="scope.row.replace_price" type="number" step="0.01" size="mini"
                                placeholder="请输入价格"
                      >
                        <template slot="append">元/幅/次</template>
                      </el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column v-if="!formDisabled" width="50" align="center">
                  <template slot="header">
                    <i style="color: #00c300;font-size: 20px;line-height: 38px" class="el-icon-circle-plus-outline"
                       @click="priceAdd(2)"
                    />
                  </template>
                  <template slot-scope="scope">
                    <i style="color: #da0000;font-size: 20px;line-height: 38px" class="el-icon-remove-outline"
                       @click="priceRemove(2,scope.$index)"
                    />
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <p>现金人民币
              {{ cuForm2.pay_cash_amount ? cuForm2.pay_cash_amount : '0' }}元
              ，(大写 {{ cuForm2.pay_cash_amount_big }} )；置换人民币
              {{ cuForm2.displace_amount ? cuForm2.displace_amount : '0' }}元
              ，(大写 {{ cuForm2.displace_amount_big }} )<br>
              备注：
              <el-input v-model="cuForm2.memo" type="textarea" placeholder="请输入备注"></el-input>
              <el-table class="fill_table" :data="cuForm2.payDetailList" style="margin-top: 10px" border>
                <el-table-column label="付款时间" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0" :prop="'payDetailList.'+scope.$index+'.pay_time'"
                                  :rules="{required: true, message: '付款时间不能为空', trigger: 'change'}"
                    >
                      <el-date-picker
                        v-model="scope.row.pay_time"
                        type="date"
                        placeholder="请选择付款时间"
                        value-format="yyyy-MM-dd"
                        format="yyyy年MM月dd日"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="付款金额" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0" :prop="'payDetailList.'+scope.$index+'.pay_amount'"
                                  :rules="{required: true, message: '付款时间不能为空', trigger: 'blur'}"
                    >
                      <el-input v-model="scope.row.pay_amount" placeholder="请输入付款金额" type="number" step="0.01">
                      </el-input>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="付款方式" align="center">
                  <template slot-scope="scope">
                    <el-form-item style="margin: 18px 0" :prop="'payDetailList.'+scope.$index+'.pay_type'"
                                  :rules="{required: true, message: '付款时间不能为空', trigger: 'change'}"
                    >
                      <el-select v-model="scope.row.pay_type" placeholder="请选择付款方式">
                        <el-option :value="1" label="现金"></el-option>
                        <el-option :value="2" label="置换"></el-option>
                      </el-select>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column v-if="!formDisabled" width="50" align="center">
                  <template slot="header">
                    <i style="color: #00c300;font-size: 20px;line-height: 38px" class="el-icon-circle-plus-outline"
                       @click="addPay"
                    ></i>
                  </template>
                  <template slot-scope="scope">
                    <i style="color: #da0000;font-size: 20px;line-height: 38px" class="el-icon-remove-outline"
                       @click="deletePayByIndex(scope.$index)"
                    ></i>
                  </template>
                </el-table-column>
              </el-table>
            </p>
            <p>4、甲方经办人联系方式：
              <el-form-item prop="part_a_contact">
                <el-input v-model="cuForm2.part_a_contact" placeholder="请输入甲方经办人联系方式"></el-input>
              </el-form-item>
              ，乙方经办人联系方式：
              <el-form-item prop="part_b_contact">
                <el-input v-model="cuForm2.part_b_contact" placeholder="请输入乙方经办人联系方式"></el-input>
              </el-form-item>
            </p>
            <p>开户名：
              <el-form-item prop="bank_account_name">
                <el-input v-model="cuForm2.bank_account_name" placeholder="请输入开户名" style="width: 500px"></el-input>
              </el-form-item>
            </p>
            <p>开户行：
              <el-form-item prop="bank_name">
                <el-input v-model="cuForm2.bank_name" placeholder="请输入开户行" style="width: 500px"></el-input>
              </el-form-item>
            </p>
            <p>帐号：
              <el-form-item prop="bank_num">
                <el-input v-model="cuForm2.bank_num" placeholder="请输入账号" style="width: 500px"></el-input>
              </el-form-item>
            </p>
            <p>
              验收方式
              <el-select size="mini" clearable v-model="cuForm2.acceptance_way" style="width: 60px">
                <el-option value="A"></el-option>
                <el-option value="B"></el-option>
              </el-select>
            </p>
            <p>
              A、现场验收&nbsp;&nbsp;&nbsp;&nbsp;B、画面情况报送验收
            </p>
            <p>
              更换视频画面价格
              <el-input style="width: 150px" size="mini" v-model="cuForm2.multi_replace_price" placeholder="请输入更换视频费用"
                        type="number" step="0.01"
              ></el-input>
              元/张
            </p>
            <p>
              其他约定：
              <el-input type="textarea" v-model="cuForm2.other_memo" size="mini" placeholder="请输入其他约定" :rows="4"
              ></el-input>
            </p>
            <p style="text-align: right">签订日期：
              <el-form-item prop="sign_date">
                <el-date-picker v-model="cuForm2.sign_date" type="date" placeholder="签订时间"
                                value-format="yyyy-MM-dd" format="yyyy年MM月dd日" style="width: 180px" :disabled="true"
                >
                </el-date-picker>
              </el-form-item>
            </p>
          </div>
          <div class="two_title">附件信息</div>
          <div style="width: 80%;margin: 10px auto">
            <el-button type="primary" size="mini" :disabled="!canUpload" @click="showUpLoad">上传合同</el-button>
          </div>
          <el-table :data="cuForm2.attachmentList" size="mini" border stripe style="width: 80%;margin: 0 auto">
            <el-table-column label="序号" width="50" align="center">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column label="合同名称" prop="name" min-width="300" align="center">
            </el-table-column>
            <el-table-column label="操作" width="250" align="center">
              <template slot-scope="scope">
                <el-button-group>
                  <el-button size="mini" type="success" @click="look(scope.row.url)" :disabled="false">预览
                  </el-button>
                  <el-button size="mini" type="primary" @click="download(scope.row.url)" :disabled="false">下载查看
                  </el-button>
                  <el-button size="mini" type="danger" @click="removeAttachment(scope.$index)">删除</el-button>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </div>
    </el-card>
    <FlowBtnRow style="margin-bottom: 10px" :form-name="'cuForm2'" :is-new-data="is_created"
                :is-applyer="cuForm2.flow_applyer_id == user_id" :can-check="cuForm2.can_check"
                :flow-status="cuForm2.flow_status"
                :data-id="(params || {}).id || ((params || {}).handle_param || {}).id" :flowType="17"
                @save="save" @submit="submit" @pass="pass" @returnBack="returnBack" @delete="remove"
                @actualDelete="actualDelete"
    ></FlowBtnRow>
    <contract-upload :upload-dialog-show="contractUploadShow" :type="1" @close="closeUpload" @success="uploadSuccess"
    ></contract-upload>
  </div>
</template>

<script>
import { list as getPlanList } from '@/api/business/intention_scheme'
import { actual_delete, begin, detail, part_a_history, pass, remove, return_back, save, saveAttachment } from '@/api/contract'
import { get_company } from '@/api/system/department'
import contractUpload from '@/components/contractUpload/index'
import { add, amountToBigStr } from '@/utils/amount'
import { company_list_all, list_all } from '@/api/customer/customer'
import { list_media_types } from '@/api/building/building'
import { list_media_type_include_proxy } from '@/api/point/media'
import { listTypeSpecByMediaTypeId } from '@/api/media/specs'
import FlowBtnRow from '@/components/FlowBtnRow'
import { cloneDeep } from 'lodash'

export default {
  name: 'update',
  computed: {
    user_id() {
      return this.$store.state.user.id
    },
    formDisabled() {
      return this.cuForm2.flow_status == 3 || this.cuForm2.flow_status == 4
    },
    self_price_big() {
      return amountToBigStr(this.cuForm.self_price)
    },
    proxy_price_big() {
      return amountToBigStr(this.cuForm.proxy_price)
    },
    self_price_big2() {
      return amountToBigStr(this.cuForm2.self_price)
    },
    proxy_price_big2() {
      return amountToBigStr(this.cuForm2.proxy_price)
    },
		canUpload(){
			return this.is_created || (this.cuForm2.cur_user_maintenance && this.cuForm2.mode == 0);
		},
  },
  async created() {
    const uuid = this.$route.query.uuid
    const params = this.$store.state.keep.pageParamsMap.get(uuid)
    this.params = Object.assign({}, params)
    this.formLoading = true
    await get_company().then(res => {
      this.dept_list = res.data
    })
    this.initPoint_type_arr()
    this.list_media_type_include_proxy()
    if (params) {
      // 如果是新建
      if (params.is_create) {
        this.is_created = true
        this.showCreatePointType = true
        this.initCustomerArr() // 初始化客户信息
      }
      if (params.id) {
        this.formLoading = true
        if (!params.is_create) {
          this.initCustomerList()
        }
        detail(params.id).then(async res => {
          this.cuForm = res.data
          for (let i = 0; i < this.cuForm.mediaDetailList.length; i++) {
            const item = this.cuForm.mediaDetailList[i]
            await listTypeSpecByMediaTypeId({ mediaTypeId: item.media_type_id }).then(res => {
				res.data.push('无')
              this.$set(item, 'media_type_spec_arr', res.data)
            })
          }
          await part_a_history({ customerId: this.cuForm.customer_id }).then(res => {
            this.part_a_history_list = res.data
          })
          this.selectDept = this.dept_list.find(item => item.id === this.cuForm.part_b_id)
          // 如果是新建补充合同
          if (params.is_create && params.is_update) {
            this.formLoading = false
            this.cuForm2 = cloneDeep(this.cuForm)
            this.selectDept2 = cloneDeep(this.selectDept)
            this.cuForm2 = Object.assign(this.cuForm2, this.resetObj)
            this.cuForm2.old_data = false
            this.params.id = null
            this.cuForm2.parent_id = params.id
          } else if (params.is_update && !params.is_create) {
            // 如果是查看或者审批补充合同
            detail(this.cuForm.parent_id).then(async res => {
              // 此时cuForm是补充协议 cuForm2是才是原合同
              const tmp = cloneDeep(this.cuForm)
              this.formLoading = false
              this.cuForm = res.data
              for (let i = 0; i < this.cuForm.mediaDetailList.length; i++) {
                const item = this.cuForm.mediaDetailList[i]
                await listTypeSpecByMediaTypeId({ mediaTypeId: item.media_type_id }).then(res => {
					res.data.push('无')
                  this.$set(item, 'media_type_spec_arr', res.data)
                })
              }
              this.selectDept = this.dept_list.find(item => item.id === this.cuForm.part_b_id)
              this.cuForm2 = tmp
              this.getHistoryUser(this.cuForm2.customer_id)
              this.selectDept2 = this.dept_list.find(item => item.id === this.cuForm2.part_b_id)
            })
          } else {
            this.formLoading = false
          }
        })
      }
      if (params.handle_param) {
        this.formLoading = true
        this.initCustomerList()
        detail(params.handle_param.id).then(async res => {
          this.cuForm = res.data
          for (let i = 0; i < this.cuForm.mediaDetailList.length; i++) {
            const item = this.cuForm.mediaDetailList[i]
            await listTypeSpecByMediaTypeId({ mediaTypeId: item.media_type_id }).then(res => {
				res.data.push('无')
              this.$set(item, 'media_type_spec_arr', res.data)
            })
          }
          await part_a_history({ customerId: this.cuForm.customer_id }).then(res => {
            this.part_a_history_list = res.data
          })
          this.selectDept = this.dept_list.find(item => item.id === this.cuForm.part_b_id)
          // 如果是查看或者审批补充合同
          if (params.is_update && !params.is_create) {
            detail(this.cuForm.parent_id).then(async res => {
              // 此时cuForm是补充协议 cuForm2是才是原合同
              const tmp = cloneDeep(this.cuForm)
              this.formLoading = false
              this.cuForm = res.data
              for (let i = 0; i < this.cuForm.mediaDetailList.length; i++) {
                const item = this.cuForm.mediaDetailList[i]
                await listTypeSpecByMediaTypeId({ mediaTypeId: item.media_type_id }).then(res => {
					res.data.push('无')
                  this.$set(item, 'media_type_spec_arr', res.data)
                })
              }
              this.selectDept = this.dept_list.find(item => item.id === this.cuForm.part_b_id)
              this.cuForm2 = tmp
              this.getHistoryUser(this.cuForm2.customer_id)
              this.selectDept2 = this.dept_list.find(item => item.id === this.cuForm2.part_b_id)
            })
          }
        })
      }
    }
  },
  components: { contractUpload, FlowBtnRow },
  data() {
    return {
      type: 1,
      tmpIndex: -1,
      date_range: [],
      buildingList: [],
      disabled: false,
      is_created: false,
      exclude_building_id_list: [],
      exclude_media_id_list: [],
      pointTypeIdList: [],
      positionSelectionDialogVisible: false,
      showCreatePointType: false, // 是否显示选择点位创建方式的盒子
      showInfo: true,
      formLoading: false,
      cuRules: {
        part_a: [
          { required: true, message: '请输入甲方合同名称', trigger: 'blur' }
        ],
        part_a_phone: [
          { required: true, message: '请输入甲方联系方式', trigger: 'blur' }
        ],
        customer_id: [
          { required: true, message: '请选择客户', trigger: 'change' }
        ],
        part_b_name: [
          { required: true, message: '请选择乙方', trigger: 'change' }
        ],
        part_b_phone: [
          { required: true, message: '请输入乙方联系方式', trigger: 'blur' }
        ],
        discounted_price: [
          { required: true, message: '请输入优惠价格', trigger: 'blur' }
        ],
        // part_a_contact: [
        //   { required: true, message: '请输入甲方经办人联系方式', trigger: 'blur' }
        // ],
        // part_b_contact: [
        //   { required: true, message: '请输入乙方经办人联系方式', trigger: 'blur' }
        // ],
        bank_account_name: [
          { required: true, message: '请输入开户名', trigger: 'blur' }
        ],
        // 开户行名
        bank_name: [
          { required: true, message: '请输入开户行', trigger: 'blur' }
        ],
        // 开户号
        bank_num: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        // 合同开始日期
        contract_begin_date: [
          { required: true, message: '请选择合同开始日期', trigger: 'change' }
        ],
        // 合同结束日期
        contract_end_date: [
          { required: true, message: '请选择合同结束日期', trigger: 'change' }
        ],
        // 签订日期
        sign_date: [
          { required: true, message: '请选择签订日期', trigger: 'change' }
        ]
      },
      flag: true, // true为关联方案 false为选点
      customer_arr: [],
      centerDialogVisible: false,
      selectDept: null,
      selectPartA: null,
      cuForm: {
        id: null,
        // 合同编号
        contract_num: null,
        // 客户ID（项目名称）
        customer_id: null,
        // 甲方
        part_a: null,
        // 乙方id
        part_b_id: null,
        // 乙方名称
        part_b_name: null,
        // 甲方人联系方式
        part_a_contact: null,
        // 乙方人联系方式
        part_b_contact: null,
        // 开户名
        bank_account_name: null,
        // 开户行名
        bank_name: null,
        // 开户号
        bank_num: null,
        // 合同开始日期
        contract_begin_date: null,
        // 合同结束日期
        contract_end_date: null,
        // 签订日期
        sign_date: null,
        // 优惠价格
        discounted_price: null,
        // 优惠价格（大写)
        discounted_price_big: null,
        // todo new
        // 是否含税
        contain_tax: false,
        // todo new
        // 另收**%税费
        tax_percent: null,
        // 自有资源价格
        self_price: null,
        // todo new
        // 自有资源价格（大写)
        self_price_big: null,
        // 代理资源价格")
        proxy_price: null,
        // todo new
        // 代理资源价格（大写）
        proxy_price_big: null,
        // 画面更换价格
        replace_price: null,
        // todo new
        // 现金支付金额
        pay_cash_amount: null,
        // todo new
        // 现金支付金额（大写）
        pay_cash_amount_big: null,
        // todo new
        // 置换金额
        displace_amount: null,
        // todo new
        // 置换金额（大写）
        displace_amount_big: null,
        // 多次换画价格
        multi_replace_price: null,
        // 验收方式
        acceptance_way: null,
        // 备注
        memo: null,
        other_memo: null,
        // 父合同ID，补充协议时使用，普通合同不传
        parent_id: null,
        // 自身媒体资源明细
        mediaDetailList: [],
        // 附件id列表
        attachmentList: [],
        // 代理情况明细
        proxyMediaDetailList: [],
        // 付款明细
        payDetailList: [],
        // 自有资源换画价格
        contractMediaReplacePriceList: [],
        // 代理资源换画价格
        contractProxyMediaReplacePriceList: []
      },
      part_a_history_list: [],
      dept_list: [],
      planDialogVisible: false,
      planListParams: {
        lockStatus: 2,
        page: 1,
        page_size: 10
      },
      planTotal: null,
      planTableLoading: false,
      planTableData: [],
      choosePlanTableData: [],
      contractUploadShow: false,
      errorData: {},
      point_type_arr: [],
      all_media_type_name_arr: [],
      params: {},
      is_update: false,
      selectDept2: null,
      cuForm2: {
        id: null,
        // 合同编号
        contract_num: null,
        // 客户ID（项目名称）
        customer_id: null,
        // 甲方
        part_a: null,
        // 乙方id
        part_b_id: null,
        // 乙方名称
        part_b_name: null,
        // 甲方人联系方式
        part_a_contact: null,
        // 乙方人联系方式
        part_b_contact: null,
        // 开户名
        bank_account_name: null,
        // 开户行名
        bank_name: null,
        // 开户号
        bank_num: null,
        // 合同开始日期
        contract_begin_date: null,
        // 合同结束日期
        contract_end_date: null,
        // 签订日期
        sign_date: null,
        // 优惠价格
        discounted_price: null,
        // 优惠价格（大写)
        discounted_price_big: null,
        // todo new
        // 是否含税
        contain_tax: false,
        // todo new
        // 另收**%税费
        tax_percent: null,
        // 自有资源价格
        self_price: null,
        // todo new
        // 自有资源价格（大写)
        self_price_big: null,
        // 代理资源价格")
        proxy_price: null,
        // todo new
        // 代理资源价格（大写）
        proxy_price_big: null,
        // 画面更换价格
        replace_price: null,
        // todo new
        // 现金支付金额
        pay_cash_amount: null,
        // todo new
        // 现金支付金额（大写）
        pay_cash_amount_big: null,
        // todo new
        // 置换金额
        displace_amount: null,
        // todo new
        // 置换金额（大写）
        displace_amount_big: null,
        // 多次换画价格
        multi_replace_price: null,
        // 验收方式
        acceptance_way: null,
        // 备注
        memo: null,
        other_memo: null,
        // 父合同ID，补充协议时使用，普通合同不传
        parent_id: null,
        // 自身媒体资源明细
        mediaDetailList: [],
        // 附件id列表
        attachmentList: [],
        // 代理情况明细
        proxyMediaDetailList: [],
        // 付款明细
        payDetailList: [],
        // 自有资源换画价格
        contractMediaReplacePriceList: [],
        // 代理资源换画价格
        contractProxyMediaReplacePriceList: [],

		// 当前人维护
		cur_user_maintenance: false,
      },
      resetObj: {
        id: null,
        flow_title: null,
        flow_applyer_id: null,
        flow_applyer_org_id: null,
        flow_default_id: null,
        flow_json: null,
        flow_status: null,
        flow_current_node_id: null,
        flow_current_node_name: null,
        flow_passed_at: null,
        can_check: false,
        attachmentList: []
      }
    }
  },
  methods: {
    initPoint_type_arr() {
      list_media_types().then(
        res => {
          this.point_type_arr = res.data
        }
      )
    },
    list_media_type_include_proxy() {
      list_media_type_include_proxy().then(res => {
        this.all_media_type_name_arr = res.data
      })
    },
    initCustomerArr() {
      list_all().then(res => {
        this.customer_arr = res.data
      })
    },
    initCustomerList() {
      company_list_all().then(res => {
        this.customer_arr = res.data
      })
    },
    selectDeptChange(val) {
      if (val) {
        this.cuForm2.part_b_id = val.id
        this.cuForm2.part_b_name = val.head
        this.cuForm2.bank_account_name = val.head
        this.cuForm2.bank_name = val.bank
        this.cuForm2.bank_num = val.bank_card_num
      } else {
        this.cuForm2.part_b_id = null
        this.cuForm2.part_b_name = null
        this.cuForm2.bank_account_name = null
        this.cuForm2.bank_name = null
        this.cuForm2.bank_num = null
      }
    },
    save() {
      const flag = this.handlerProxy()
      if (!flag) {
        return
      }
      const b = this.handlerAmount()
      if (!b) {
        return
      }
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      save(this.cuForm2).then(res => {
        if (res.data) {
          this.$message.success('操作成功')
        } else {
          this.closeThisPage()
        }
        loading.close()
      }).catch(() => {
        loading.close()
      })
    },
    submit() {
      const flag = this.handlerProxy()
      if (!flag) {
        return
      }
      const b = this.handlerAmount()
      if (!b) {
        return
      }
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      begin(this.cuForm2).then(res => {
        if (res.data) {
          this.$message.success('操作成功')
        } else {
          this.closeThisPage()
        }
        loading.close()
      }).catch(() => {
        loading.close()
      })
    },
    pass(opinion) {
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      pass({ id: this.cuForm2.id, wf_check_opinion: opinion }).then(res => {
        this.$message.success('操作成功')
        this.closeThisPage()
        loading.close()
      }).catch(() => {
        loading.close()
      })
    },
    returnBack(opinion) {
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      return_back({ id: this.cuForm2.id, wf_check_opinion: opinion }).then(res => {
        this.$message.success('操作成功')
        this.closeThisPage()
        loading.close()
      }).catch(() => {
        loading.close()
      })
    },
    remove() {
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      remove({ id: this.cuForm2.id }).then(res => {
        this.$message.success('操作成功')
        this.closeThisPage()
        loading.close()
      }).catch(() => {
        loading.close()
      })
    },
    actualDelete() {
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      actual_delete({ id: this.cuForm2.id }).then(res => {
        this.$message.success('操作成功')
        this.closeThisPage()
        loading.close()
      }).catch(() => {
        loading.close()
      })
    },
    closeThisPage() {
      this.$store.dispatch('tagsView/closeCurPage')
    },
    getPlanList() {
      this.planTableLoading = true
      getPlanList(this.planListParams).then(res => {
        this.planTableLoading = false
        this.planTableData = res.data.records
        this.planTotal = res.data.total
      }).catch(() => {
        this.planTableLoading = false
      })
    },
    showPlanDialog() {
      this.planDialogVisible = true
      this.getPlanList()
    },
    handleCurrentChange(val) {
      this.planListParams.page = val
      this.getPlanList()
    },
    /**
     * 关闭选取方案弹框
     */
    closePlanDialog() {
      this.planListParams.page = 1
      this.choosePlanTableData = []
    },
    /**
     * 选中方案
     * @param row
     */
    selectPlan(row) {
      this.choosePlanTableData.push(Object.assign({}, row))
    },
    /**
     * 删除选中方案
     * @param index
     */
    removeChoosePlan(index) {
      this.choosePlanTableData.splice(index, 1)
    },
    addPlan() {
      this.plan_list = this.plan_list.concat(this.choosePlanTableData.map(item => {
        return {
          id: item.id,
          plan_name: item.plan_name
        }
      }))
      this.planDialogVisible = false
    },
    removePlan(index) {
      this.$confirm('确定移除此方案?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.plan_list.splice(index, 1)
      }).catch(() => {
      })
    },
    typeChange(val) {
      if (!val && this.plan_list.length > 0) {
        this.$confirm('切换到选位将丢失已选择的方案数据?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.plan_list = []
        }).catch(() => {
          this.flag = true
        })
      }
    },
    showPointSelect() {
      this.positionSelectionDialogVisible = true
      this.centerDialogVisible = false
      this.showCreatePointType = false
      this.showInfo = false
    },
    closeUpload() {
      this.contractUploadShow = false
    },
    showUpLoad() {
      this.contractUploadShow = true
    },
    /**
     * 文件上传
     * @param data
     */
    uploadSuccess(data) {
      this.cuForm2.attachmentList.push(Object.assign({}, data))
      this.closeUpload()

	  // 合同已通过审核，为后补合同，需要调用保存
	  	  if(this.cuForm2.cur_user_maintenance && this.cuForm2.mode == 0 && !this.is_created && !!this.cuForm2.id){
	  		  const loading = this.$loading({
	  		    lock: true,
	  		    text: '保存附件中',
	  		    spinner: 'el-icon-loading',
	  		    background: 'rgba(0, 0, 0, 0.7)'
	  		  })
	  		  saveAttachment(this.cuForm2).then(res => {
	  			  loading.close()
	  		    if (res.data) {
	  		      this.$message.success('保存附件成功')
	  		    }else{
	  				this.$message.error('保存附件失败');
	  				this.cuForm2.attachmentList = this.cuForm2.attachmentList.slice(0, this.cuForm2.attachmentList.length - 1);
	  			}
	  		  }).catch(() => {
	  			   loading.close();
	  			  this.$message.error('保存附件失败');
	  			this.cuForm2.attachmentList = this.cuForm2.attachmentList.slice(0, this.cuForm2.attachmentList.length - 1);
	  		  })
	  	  }
    },
    removeAttachment(index) {
      this.$confirm('是否确定删除合同', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.cuForm2.attachmentList.splice(index, 1)
      }).catch(() => {
      })
    },
    add() {
      this.cuForm2.proxyMediaDetailList.push({
        proxy_media_type: null,
        media_type_spec: null,
        quantity: null,
        duration: null,
        amount: null
      })
    },
    deleteByIndex(index) {
      this.cuForm2.proxyMediaDetailList.splice(index, 1)
    },
    /**
     * 自由资源添加
     */
    myAdd() {
      this.cuForm2.mediaDetailList.push({
        media_type_id: null,
        media_type_spec_arr: [],
        media_type_spec_id: null,
        quantity: null,
        duration: null,
        amount: null
      })
    },
    /**
     * 自由资源删除
     * @param index
     */
    myDeleteByIndex(index) {
      this.cuForm2.mediaDetailList.splice(index, 1)
    },
    /**
     * 获取搜索默认配置项
     * @param index
     * @param type 1:增加排斥点位 2:增加排斥楼盘 3:复用楼盘
     * @param date 时间
     * @param arr 数据（排斥的点位数据或排斥的楼盘或复用的楼盘）
     * @param pointTypeArr 选中的点位类型数据
     * @param configType 配置项的类型
     * @param disabled 增加的配置是否可以换类型
     */
    getSearchConfig(index, type, date, arr, pointTypeArr, configType, disabled) {
      this.tmpIndex = index
      if (type == 1) {
        this.exclude_media_id_list = arr
      } else if (type == 2) {
        this.exclude_building_id_list = arr
      } else {
        this.buildingList = arr
      }
      this.date_range = date
      this.pointTypeIdList = pointTypeArr
      this.type = configType
      this.disabled = disabled
      this.positionSelectionDialogVisible = true
    },
    editConfigBuildingData(configIndex, buildingId, pointTypeId, mediaArr, isConflict = false) {
      if (isConflict) {
        this.cuForm.tmpDataList[configIndex].dataArr.forEach(item => {
          if (item.id == buildingId) {
            mediaArr.forEach(tmp => {
              const find = item.pointTypeCountVOMap[pointTypeId].mediaPointList.find(point => point.id == tmp.id)
              if (find) {
                item.pointTypeCountVOMap[pointTypeId].to--
                find.checked = false
              }
            })
          }
        })
      } else {
        this.cuForm.tmpDataList[configIndex].dataArr.forEach(item => {
          if (item.id == buildingId) {
            mediaArr.forEach(tmp => {
              const find = item.pointTypeCountVOMap[pointTypeId].mediaPointList.find(point => point.id == tmp.id)
              if (find) {
                if (find.checked != tmp.checked) {
                  if (tmp.checked) {
                    item.pointTypeCountVOMap[pointTypeId].to++
                  } else {
                    item.pointTypeCountVOMap[pointTypeId].to--
                  }
                  find.checked = tmp.checked
                }
              } else {
                item.pointTypeCountVOMap[pointTypeId].push(Object.assign({}, find))
              }
            })
          }
        })
      }
    },
    getDateStr(date) {
      return date.getFullYear() + '-' + ((date.getMonth() + 1) > 9 ? (date.getMonth() + 1) : '0' + (date.getMonth() + 1)) + '-' + (date.getDate() > 9 ? date.getDate() : ('0' + date.getDate()))
    },
    download(url) {
      if (url) {
        window.open(url, '_blank')
      } else {
        this.$message.error('文件不存在！请联系管理员')
      }
    },
    // /**
    //  * 重置表单部分属性
    //  */
    // resetContract() {
    //   const resetObj = {
    //     id: null,
    //     choose_id: null,
    //     flow_applyer_id: null,
    //     flow_applyer_org_id: null,
    //     flow_default_id: null,
    //     flow_json: null,
    //     flow_status: null,
    //     // 广告发布媒体
    //     release_media: null,
    //     // 发布规格
    //     release_spec: null,
    //     // 发布内容
    //     release_content: null,
    //     // 发布期间
    //     release_period: null,
    //     // 发布地点和范围
    //     release_area_scope: null,
    //     // 优惠价格
    //     discounted_price: null,
    //     // 自有资源
    //     self_price: null,
    //     // 代理资源
    //     proxy_price: null,
    //     // 合同开始日期
    //     contract_begin_date: null,
    //     // 合同结束日期
    //     contract_end_date: null,
    //     // 签订日期
    //     sign_date: null,
    //     // 广告发布费
    //     advertising_costs: null,
    //     // 附件id列表
    //     attachmentIdList: [],
    //     attachmentList: []
    //   }
    //   this.cuForm = Object.assign(this.cuForm, resetObj)
    // },
    handlerProxy() {
      let sum = 0
      if (this.cuForm2.self_price) {
        sum = add(this.cuForm2.self_price, sum)
      }
      if (this.cuForm2.proxy_price) {
        sum = add(this.cuForm2.proxy_price, sum)
      }
      if (sum != this.cuForm2.discounted_price) {
        this.$message.error('自有资源金额和代理资源相加不等于优惠价格 请调整！')
        return false
      } else {
        if (this.cuForm2.proxyMediaDetailList.length == 0 && !(this.cuForm2.proxy_price)) {
          return true
        } else {
          let sum2 = 0
          this.cuForm2.proxyMediaDetailList.forEach(item => {
            sum2 = add(sum2, item.amount)
          })
          if (sum2 != this.cuForm2.proxy_price) {
            this.$message.error('代理资源明细总额不等于代理资源价格 请调整！')
            return false
          } else {
            return true
          }
        }

      }
    },
    handlerAmount() {
      // if (!this.cuForm2.payDetailList || (this.cuForm2.payDetailList && this.cuForm2.payDetailList.length === 0)) {
      //   this.$message.error('支付明细至少有一项')
      //   return false
      // }
      let sum = 0
      if (this.cuForm2.pay_cash_amount) {
        sum = add(this.cuForm2.pay_cash_amount, sum)
      }
      if (this.cuForm2.displace_amount) {
        sum = add(this.cuForm2.displace_amount, sum)
      }
      if (sum == this.cuForm2.discounted_price) {
        return true
      } else {
        this.$message.error('现金金额加上置换金额不等于优惠价格')
        return false
      }
    },
    addPay() {
      this.cuForm2.payDetailList.push({
        pay_time: null,
        pay_amount: null,
        pay_type: null
      })
    },
    deletePayByIndex(index) {
      this.cuForm2.payDetailList.splice(index, 1)
    },
    mediaTypeChange(index, mediaTypeId) {
      this.cuForm2.mediaDetailList[index].media_type_spec_id = null
      listTypeSpecByMediaTypeId({ mediaTypeId }).then(res => {
				res.data.push('无')
        this.cuForm2.mediaDetailList[index].media_type_spec_arr = res.data
      })
    },
    look(url) {
      const fileName = url.substring(url.lastIndexOf('.') + 1)
      if (fileName === 'pdf') {
        window.open(url, '_blank')
      } else {
        const str = 'https://view.officeapps.live.com/op/view.aspx?src=' + url
        window.open(str, '_blank')
      }
    },
    getHistoryUser(id) {
      part_a_history({ customerId: id }).then(res => {
        this.part_a_history_list = res.data
      })
    },
    priceAdd(type) {
      if (type === 1) {
        this.cuForm2.contractMediaReplacePriceList.push({
          media_type_id: null,
          replace_price: null
        })
      } else {
        this.cuForm2.contractProxyMediaReplacePriceList.push({
          media_type_name: null,
          replace_price: null
        })
      }
    },
    priceRemove(type, index) {
      if (type === 1) {
        this.cuForm2.contractMediaReplacePriceList.splice(index, 1)
      } else {
        this.cuForm2.contractProxyMediaReplacePriceList.splice(index, 1)
      }
    }
  },
  watch: {
    'cuForm.advertising_costs': {
      handler(val) {
        if (val !== null) {
          this.cuForm.advertising_costs_big = amountToBigStr(val)
        }
      }
    },
    'cuForm.discounted_price': {
      handler(val) {
        if (val !== null) {
          this.cuForm.discounted_price_big = amountToBigStr(val)
        }
      }
    },
    'cuForm.pay_cash_amount': {
      handler(val) {
        if (val !== null) {
          this.cuForm.pay_cash_amount_big = amountToBigStr(val)
        }
      }
    },
    'cuForm.displace_amount': {
      handler(val) {
        if (val !== null) {
          this.cuForm.displace_amount_big = amountToBigStr(val)
        }
      }
    },
    'cuForm2.advertising_costs': {
      handler(val) {
        if (val !== null) {
          this.cuForm2.advertising_costs_big = amountToBigStr(val)
        }
      }
    },
    'cuForm2.discounted_price': {
      handler(val) {
        if (val !== null) {
          this.cuForm2.discounted_price_big = amountToBigStr(val)
        }
      }
    },
    'cuForm2.pay_cash_amount': {
      handler(val) {
        if (val !== null) {
          this.cuForm2.pay_cash_amount_big = amountToBigStr(val)
        }
      }
    },
    'cuForm2.displace_amount': {
      handler(val) {
        if (val !== null) {
          this.cuForm2.displace_amount_big = amountToBigStr(val)
        }
      }
    },
    'cuForm2.self_price': {
      handler(val) {
        if (val) {
          let sum = 0
          sum = add(val, sum)
          if (this.cuForm2.proxy_price !== null) {
            sum = add(this.cuForm2.proxy_price, sum)
          }
          this.cuForm2.discounted_price = sum
        }
      }
    },
    'cuForm2.proxy_price': {
      handler(val) {
        if (val) {
          let sum = 0
          if (this.cuForm2.self_price !== null) {
            sum = add(this.cuForm2.self_price, sum)
          }
          sum = add(val, sum)
          this.cuForm2.discounted_price = sum
        }
      }
    },
    'cuForm2.mediaDetailList': {
      handler(arr) {
        let money = 0
        for (let i = 0; i < arr.length; i++) {
          const tmp = arr[i]
          if (tmp.amount !== null) {
            money = add(tmp.amount, money)
          }
        }
        this.cuForm2.self_price = money
      },
      deep: true
    },
    'cuForm2.proxyMediaDetailList': {
      handler(arr) {
        let money = 0
        for (let i = 0; i < arr.length; i++) {
          const tmp = arr[i]
          if (tmp.amount !== null) {
            money = add(tmp.amount, money)
          }
        }
        this.cuForm2.proxy_price = money
      },
      deep: true
    },
    'cuForm2.payDetailList': {
      handler(payDetailList) {
        let pay_cash_amount = 0, displace_amount = 0
        // 检查付款金额
        if (payDetailList && payDetailList.length > 0) {
          let pay_cash_arr = payDetailList.filter(item => item.pay_amount !== null && item.pay_type === 1)
          let displace_arr = payDetailList.filter(item => item.pay_amount !== null && item.pay_type === 2)
          pay_cash_arr.forEach(item => {
            pay_cash_amount = add(pay_cash_amount, item.pay_amount)
          })
          displace_arr.forEach(item => {
            displace_amount = add(displace_amount, item.pay_amount)
          })
        }
        this.cuForm2.pay_cash_amount = pay_cash_amount
        this.cuForm2.displace_amount = displace_amount
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
.contract_title {
  width: 80%;
  margin: 0 auto;
  text-align: right;
}

.contract_content p {
  width: 80%;
  margin: 0 auto;
  line-height: 50px;
  font-size: 18px;
}

.p_title {
  font-weight: bold;
}

.header {
  padding-top: 20px;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  margin: 10px auto;
}

/**
 去除el-form-item的下边距
 */
/deep/ .cuForm .el-form-item {
  margin-bottom: 0;
  display: inline-block;
}

/**
去除el-form-item__content的左边距
 */
/deep/ .cuForm .el-form-item__content {
  margin-left: 0 !important;
  //display: inline-block;
}

/deep/ .cuForm .el-input.is-disabled .el-input__inner {
  background-color: white;
  color: black;
}

/deep/ .cuForm .el-textarea.is-disabled .el-textarea__inner {
  background-color: white;
  color: black;
}

.two_title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin: 10px auto;
}

.border_none {
  border: none !important;
}

/deep/ .proxyTable .el-form-item__error {
  position: relative;
}

.table_body {
  margin-bottom: 20px;
}

.source_contract {
  background-color: #fafafa;
}

.new_contract {
  background-color: #ebfaf3;
}

/deep/ .fill_table .el-table__cell {
  padding: 0;
}
</style>
